<template>
    <div id="admin-shell">
        <admin-sidebar></admin-sidebar>
        <admin-content></admin-content>
        <admin-helper v-show="bHelper"></admin-helper>
        <admin-footer></admin-footer>
        <admin-float-msg></admin-float-msg>
        <picture-modal></picture-modal>
    </div>
</template>
<script>
// custom component
import {
    AdminSidebar,
    AdminContent,
    AdminHelper,
    AdminFooter,
    AdminFloatMsg,
    PictureModal
} from '@/admin/components'

// mutation-types
import * as types from '@/admin/store/mutation-types'

// mapState, mapActions
import { mapState, mapActions } from 'vuex'

export default {
    name: 'admin-shell',
    data() {
        return {
            headerNamespaced: 'adminShell/adminHeader',
            helperNamespaced: 'adminShell/adminHelper'
        }
    },
    components: {
        AdminSidebar,
        AdminContent,
        AdminHelper,
        AdminFooter,
        AdminFloatMsg,
        PictureModal
    },
    computed: {
        ...mapState('adminShell/adminHelper', {
            bHelper: 'bShow'
        })
    },
    methods: {
        ...mapActions('adminShell/adminHeader', ['setBreadcrumb']),
        /**
         * 获取当前路由和其子路由的name并传入 setBreadcrumb
         * 计算出当前的面包屑导航
         */
        $_setBreadcrumb() {
            let routeNameSplit = this.$route.name.split('/')
            let routeName = []
            if (routeNameSplit.length > 0) {
                routeName.push(routeNameSplit[0])
                routeNameSplit.reduce((result, currentValue) => {
                    /**
                     * 根据当前路由名称拆分组装得到对应的父级路由数组
                     * 例如：当前路由 goods/sale 得到 ['goods','goods/sale']
                     */
                    routeName.push(`${result}/${currentValue}`)
                    return `${result}/${currentValue}`
                })
            } else {
                routeName = routeNameSplit
            }
            this.setBreadcrumb({
                routeName
            })
        },
        /**
         * 如果是首页则隐藏头部面包屑导航，右侧帮助服务否则显示
         */
        showAdminModules() {
            let showAdminHeader = `${this
                .headerNamespaced}/${types.SHOW_ADMIN_HEADER}`
            let showAdminHelper = `${this
                .helperNamespaced}/${types.SHOW_ADMIN_HELPER}`
            if (this.$route.name === 'home') {
                this.$store.commit(showAdminHeader, { bShow: false })
                this.$store.commit(showAdminHelper, { bShow: false })
            } else {
                this.$store.commit(showAdminHeader, { bShow: true })
                this.$store.commit(showAdminHelper, { bShow: true })
            }
        },
        /**
         * admin-shell 整体路由监听，处理通用型交互
         * adminHeader,adminHelper,面包屑导航
         */
        routeWatch() {
            this.showAdminModules()
            this.$_setBreadcrumb()
        }
    },
    watch: {
        $route: 'routeWatch'
    }
}
</script>
<style lang="less">

</style>